<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <link href="/webjars/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" />
    <link href="/webjars/bootstrap-fileinput/5.0.1/css/fileinput.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous"/>
    <link href="/webjars/bootstrap-fileinput/5.0.1/themes/explorer-fa/theme.css" media="all" rel="stylesheet" type="text/css"/>
    <script src="/webjars/jquery/3.1.0/jquery.js"></script>
    <script src="/webjars/bootstrap/3.3.7/js/bootstrap.js"></script>
    <script src="/webjars/bootstrap-fileinput/5.0.1/js/plugins/piexif.js" type="text/javascript"></script>
    <script src="/webjars/bootstrap-fileinput/5.0.1/js/plugins/sortable.js" type="text/javascript"></script>
    <script src="/fileInput/bootstrap-fileinput/5.0.1/js/fileinput.js" type="text/javascript"></script>
    <script src="/webjars/bootstrap-fileinput/5.0.1/js/locales/zh.js" type="text/javascript"></script>
    <script src="/webjars/bootstrap-fileinput/5.0.1/themes/explorer-fa/theme.js" type="text/javascript"></script>
    <script src="/fileInput/messenger.js" type="text/javascript"></script>


    <script type="text/javascript">
        function uuid(len, radix) {
            var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
            var uuid = [],
                i;
            radix = radix || chars.length;

            if (len) {
                // Compact form
                for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix];
            } else {
                // rfc4122, version 4 form
                var r;
                // rfc4122 requires these characters
                uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
                uuid[14] = '4';
                // Fill in random data.  At i==19 set the high bits of clock sequence as
                // per rfc4122, sec. 4.1.5
                for (i = 0; i < 36; i++) {
                    if (!uuid[i]) {
                        r = 0 | Math.random() * 16;
                        uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
                    }
                }
            }
            return uuid.join('');
        }

        $(function () {

            var filesDynCode = function(){
                return uuid(32);
            }
            // alert("dyn-"+filesDynCode());

            /**
             * 如果业务表为空的话，生成一个temp- 打头的临时表ID ，
             */
            $("#upload").fileinput({
                language: "zh",
                theme: "fa",
                uploadUrl: "/enclosure/fileInput/uploader",
                uploadExtraData:{'buisId':'1','fileUniqueCode':'测试数据','tableName':'表名','filesDynCode':''+filesDynCode()+''},
                allowedFileExtensions: ['pdf','jpg', 'png', 'gif','mp3','mp4','doc','docx','zip','avi'],
                showUpload: false, //是否显示上传按钮
                uploadAsync:true,
                overwriteInitial: false,
                initialPreviewAsData: true,
                showBrowse:false,
                browseOnZoneClick:true,
                preferIconicZoomPreview: true,
                initialPreviewAsData:true, //确定您是仅发送预览数据而不是标记
                validateInitialCount: true,
                autoOrientImage:true,//自动检测图像方向,
                initialPreviewDownloadUrl: '/enclosure/fileInput/download',
                deleteUrl: "/enclosure/fileInput/delete"
            }).on('filebatchselected', function(event, files) {
                $(this).fileinput("upload");
            });
        });
    </script>
</head>
<body>

<div class="file-loading">
    <input id="upload" name="kartik-input-700[]" type="file" multiple>
</div>

</body>
</html>